<template>
	<!-- 创建编辑新考试 -->
	<div class="addExamMain">
		<div class="addExamContent">
			<h3>{{examobj==0?'新增考试':'编辑考试'}}</h3>
			 <el-form :model="addinfo" :rules="rules" ref="addinfoForm">
				<ul>
					<li>
					<span>考试名称：</span>
					<div class="inputBox">
						<el-form-item prop="itemname">
						<el-input v-model="addinfo.itemname" placeholder="请输入内容" clearable></el-input>
						</el-form-item>
					</div>
					</li>
					<li>
					<span>所属科目：</span>
					<div class="inputBox">
						<el-form-item prop="subjectid">
						<el-select v-model="addinfo.subjectid" placeholder="请选择">
							<el-option
							v-for="item in subjectlist"
							:key="item.id"
							:label="item.subjectname"
							:value="item.id">
							</el-option>
						</el-select>
						</el-form-item>
					</div>
					</li>
					<li>
					<span>科目状态：</span>
					<div class="inputBox">
						<el-form-item prop="type2">
						<el-select v-model="addinfo.type2" placeholder="请选择">
							<el-option
							v-for="item in subjectstatus"
							:key="item.id"
							:label="item.name"
							:value="item.id">
							</el-option>
						</el-select>
						</el-form-item>
					</div>
					</li>
					<li>
					<span>参加学校：</span>
					<div class="inputBox">
						<el-form-item prop="schoolid">
						<el-select v-model="addinfo.schoolid" filterable placeholder="请选择" multiple :filter-method="filterMethod">
							<el-option
							v-for="item in schoollist"
							:key="item.gradeid"
							:label="item.schoolname"
							:value="item.gradeid">
							</el-option>
						</el-select>
						</el-form-item>
					</div>
					</li>
					<li>
					<span>IP设置：</span>
					<div class="inputBox">
						<el-form-item prop="iconServiceIp">
						<el-input v-model="addinfo.iconServiceIp" placeholder="请输入内容" clearable></el-input>
						</el-form-item>
					</div>
					</li>
					<!-- <li style="color:red;" v-if="attentionIshow">
					<span></span>
					<i class="el-icon-warning-outline" style="margin-right:5px;"></i>{{attention}}
					</li> -->
				</ul>
				</el-form>
				<div class="groupbutton">
				<el-button type="primary" @click="surebc">保存</el-button>
				<el-button type="primary" @click="goback">返回</el-button>
				</div>
		</div>
	</div>
</template>

<script>
import VDistpicker from 'v-distpicker'
import { getSubjectslist,getSchoollist,addExamsubject } from '../api/api.js'
	export default{
		props:['examobj','addexamtype','contenteditam','examnavid'],
		data(){
			return{
                addinfo:{
					nav5id:'',
                    itemname:'',
                    subjectid:'',
                    type2:'',
                    itemcaseid:2456,
                    schoolid:[],
                    iconServiceIp:''
                },
                filteredOptions: [],
                searchQuery: '',
                examclassify:[],
				subjectlist:[],
				subjectstatus:[{name:'上传未开始',id:3},{name:'上传答题卡',id:0},{name:'允许阅卷',id:1},{name:'阅卷完成',id:2}],
				schoollist:[],
				attentionIshow:false,
				rules: {
					itemname: [
					{ required: true, message: '考试名称不能为空', trigger: 'blur' }
					],
					subjectid: [
					{ required: true, message: '所属科目不能为空', trigger: 'change' }
					],
					type2: [
					{ required: true, message: '科目状态不能为空', trigger: 'change' }
					],
					schoolid: [
					{ required: true, message: '参加学校不能为空', trigger: 'change' }
					],
					iconServiceIp: [
					{ required: true, message: 'IP设置不能为空', trigger: 'blur' }
					]
				}
			}
		},
		mounted() {
			console.info('contenteditam',this.contenteditam)
			if(this.addexamtype==0){
				console.log(this.contenteditam,'----------');
				if(this.contenteditam){
					this.addinfo.itemname = this.contenteditam.nav6name
					this.addinfo.subjectid = this.contenteditam.nav6name
					this.addinfo.type2 = this.contenteditam.type2name
					this.addinfo.iconServiceIp = this.contenteditam.iconServiceIp
					let rss = []
					this.contenteditam.rss.map(res => {
						rss.push(res.gradeid)
					})
					this.addinfo.schoolid = rss
				}
			}
			// this.filteredOptions = [...this.examclassify]
			this.getsubjectlistclick()
			this.schoollistclick(JSON.parse(sessionStorage.getItem('examContent')).gradename)
		},
		methods:{
            filterMethod(query) {
                this.searchQuery = query
                this.filteredOptions = this.examclassify.filter(item => 
                    item.name.toLowerCase().includes(query.toLowerCase())
                )
            },
            goback(){
				this.$emit('addexamclick',false)
				this.addinfo={
					nav5id:'',
                    itemname:'',
                    subjectid:'',
                    type2:'',
                    itemcaseid:2456,
                    schoolid:[],
                    iconServiceIp:''
                }
			},
			// 获取学科列表
			getsubjectlistclick(){
				getSubjectslist().then(res=>{
					// console.log(res)
					if(res.code==0){
					    this.subjectlist = res.obj
					}else{
					    this.$message.error(res.msg)
					}
				})
			},
			// 获取学校列表
			schoollistclick(name){
				let obj={
					gradename:name
				}
			    getSchoollist(obj).then(res=>{
			        if(res.code==0){
					    this.schoollist = res.obj
						console.log(this.schoollist,'99999999999999')
					}else{
					    this.$message.error(res.msg)
					}
			    })
			},
			surebc(){
				this.$refs.addinfoForm.validate((valid) => {
				if (valid) {
					this.addinfo.nav5id = this.examnavid
					addExamsubject(this.addinfo).then(res=>{
						if(res.code==0){
							this.addinfo={
								nav5id:'',
								itemname:'',
								subjectid:'',
								type2:'',
								itemcaseid:2456,
								schoolid:[],
								iconServiceIp:''
							}
							this.$message.success(res.msg)
							this.$emit('addexamclick',false)
						}else{
							this.$message.error(res.msg)
						}
					})
				}else{
					this.attentionIshow = true;
					setTimeout(() => {
						this.attentionIshow = false;
					}, 3000); // 3秒后自动隐藏提示
				}
				})
				
			}
		},
        components: {
            VDistpicker
        }
	}
</script>

<style scoped>
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:110px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.el-checkbox{
		margin-right:8px;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
	.inputBox1 >>> .el-tag.el-tag--info{
		background: #F2F6FB;
		border: 1px solid #D8E4F0;
		color: #B3B8C2;
	}
	.inputBox1 >>> .el-select .el-tag__close.el-icon-close{
		background:none;
		color:#B3B8C2;
	}
    .inputBox >>> .distpicker-address-wrapper select{
		border-radius: 10px;
    	height: 35px;
		font-size: 16px;
		line-height: 35px;
		border: 1px solid #D8E4F0;
		color:#606266;
		padding:0 10px;
	}
	.inputBox >>> .el-input__icon{
	    line-height:34px;
	}
	.inputBox >>> .el-form-item{
		margin-bottom:0
	}
</style>